<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div >

  
    <div id="app"style="text-align: center;">
        <div v-if="show">
            <h1>登录</h1>
            <p>账号：<input type="text" placeholder="请输入账号"></p>
            <p>密码：<input type="password" placeholder="请输入密码"></p>
            <input type="button" value="登录">
        </div>
        <div v-else>
            <h1>注册</h1>
            <p>账    号：<input type="text" placeholder="请输入账号"></p>
            <p>密    码：<input type="password" placeholder="请输入密码"></p>
            <p>确认密码：<input type="password" placeholder="请输再次入密码"></p>
            <input type="button" value="注册">
        </div>
       <p> <input type="checkbox" v-model="show">点击切换</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script> 
    <div id="app2">
        <ul>
            <li :style="nav1Style" clock="dochange1"> 工作技能</li>
            <li :style="nav2Style" clock="dochange2"> 积极性</li>
        </ul>
        <div id="panel1" :style="pnl1style">
                <h1>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        </div>
        <div id="panel2" :style="pnl2style">
            <h1>红红火火恍恍惚惚红红火火恍恍惚惚好好好</h1>
    </div>
    </div>
    <script>
        new Vue({
            el:"#app2",
            data:{
                nav1style:{
                    background:"red"
                },
                nav2style:{
                    background:"teal"
                }
            },
            methods: {
              
              dochange:function(index){
                  if(index==1){
                    this.pnl1style={
                        dispaly:"block"
                    };
                    this.pal2style={
                        dispaly:"none"
                    };
                  }else{
                    this.pnl1style={
                        dispaly:"none"
                    };
                    this.pal2style={
                        dispaly:"block"
                    };
                  }
              }
            },
        })
    </script>
     </div>
</body>
</html>